<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Vue.js"></script>
</head>

<body>
    <div id="div">
        <!-- 这个标签在页面中不会显示 template -->
        <template v-if="is">
            <div>胡歌</div>
            <div>彭于晏</div>
            <div>韩立</div>
        </template>
        <!-- 相当于上面if是true就显示上面的，false就显示下面err... -->
        <div v-else>{{name}}</div>

        <ul>
             <!-- v-for 用这个标签可以减少创建的不必要的标签  只显示v-if="age<=20"的属性   解构{name,age}-->
            <template v-for="({name,age},index) in lis">
                <li v-if="age<=20">{{name}}</li>
            </template>
        </ul>
    </div>

   

    <script>
        const lis = [
            {
                name: '胡歌',
                age: '38'
            },
            {
                name: '彭于晏',
                age: '40'
            },
            {
                name: '韩立',
                age: '88'
            },
            {
                name: '我',
                age: '18'
            },
        ]
        const obj = {
            data() {
                return {
                    is: true,
                    name: 'errs..',
                    lis
                }
            }
        }
        const app = Vue.createApp(obj).mount('#div')
    </script>
</body>

</html>